﻿@model  TbShop.Web.Models.HomeModel

<style>
    .block-search-filter-wrap .filter-groups .filter-groups-inner .filter-row .filter-body .filter-tag.sub-category-active {
        background: rgba(32,32,32,.08);
        background: #EDEDF0\9;
        color: #f50;
    }

    .loadingDiv {
        display: none;
        text-align: center;
        color: #fff;
        font-size: 14px;
        bottom: 20px;
        margin: auto;
        width: 1190px;
        background: rgba(0, 0, 0,0.45);
        padding: 10px 0;
    }
</style>
<div id="magix_vf_root">
    <div id="magix_vf_header">
        <div class="header header-channel clearfix">
            <div class="head-bd wrap">
                <div class="channel-dropdown" style="left:0;">
                    <div class="trigger">
                        <span class="text color-d"><span>@(Model.CurrentCategory == null ? "" : Model.CurrentCategory.Name)</span></span>
                    </div>
                </div>
                <div class="input-group clearfix">
                    <form method="get">
                        <div class="input-group-input">
                            <input type="text" class="search-inp input" name="keyword" value="@Request.QueryString["keyword"]" placeholder="请输入您要搜索的商品名称" autocomplete="off">
                        </div>
                        <div class="input-group-btn ml2">
                            <button class="btn btn-brand search-btn">搜索</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="channel-cnt @(Model.CurrentCategory == null ? " channel-cnt-cdj" : Model.CurrentCategory.Class)">
        <div class="channel-bg" style="@(Model.CurrentCategory == null ? "padding-top:40px; background-image:url('url(//img.alicdn.com/tps/TB1nokXKpXXXXXRXVXXXXXXXXXX-1440-380.png)')" : "background-image:url('" + Model.CurrentCategory.ImageUrl + "')")">
            <div class="main search-main wrap" style="padding-bottom:0px;">
                <div id="magix_vf_main">
                    <div class="block-search-body">
                        @{
                            if (Model.Categorys != null && Model.Categorys.Any())
                            {
                                <div class="block-search-filter-wrap">
                                    <div id="J_category_filter" class="search-category-container">
                                        <div class="filter-groups overflow_hide" id="J_top_category_container">
                                            <div class="filter-groups-inner filter-groups-inner-first mb20">

                                                <div class="filter-row">
                                                    <div class="filter-head">
                                                        <span class="filter-head-name">相关分类：</span>
                                                    </div>
                                                    <div class="filter-body">
                                                        <div class="filter-inner clearfix">
                                                            @{
                                foreach (var item in Model.Categorys)
                                                        {
                                                            <a class="filter-tag @(Model.SubCategory != null && Model.SubCategory.Id == item.Id ? "sub-category-active" : "")" href="?categoryId=@item.Id">@item.Name</a>
                                                        }
                                                            }
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            }
                        }
                        <div id="J_sort_filter" class="block-lists-top-wrap">
                            <div class="sort-filter-container">
                                <div class="lists-top-filter">
                                    <span class="lists-top-filter-item selected">默认排序</span>
                                    <span class="lists-top-filter-item">
                                        <span class="item-hd">
                                            <span>价格</span><i class="pubfont"></i>
                                        </span>
                                        <span class="item-bd item-bd-price">
                                            <span class="item-bd-select">价格从高到低</span>
                                            <span class="item-bd-select">价格从低到高</span>
                                        </span>
                                    </span>
                                    <span class="lists-top-filter-item">
                                        <span title="销量从高到低"><span>销量</span></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div id="J_item_list">
                            <div id="J_search_results">
                                <div class="search-result-wrap search-result-wrap-block clearfix" id="resultList">
                                    @{
                                        if (Model.Goods != null && Model.Goods.Results != null && Model.Goods.Results.Any())
                                        {
                                            foreach (var item in Model.Goods.Results)
                                            {
                                                <div class="block-search-box tag-wrap">
                                                    <div class="pic-box">
                                                        <a class="search-box-img img-loaded" href="@item.ItemUrl" target="_blank"><span class="empty-icon-bg"></span><img src="@item.PictUrl"></a>
                                                    </div>
                                                    <div class="box-content">
                                                        <div class="content-line">
                                                            <p class=" p-title">
                                                                <a class="color-m" href="@item.ItemUrl" target="_blank" title="@item.Title" data-rate="@item.CommissionRate">
                                                                    <span>@item.Title</span>
                                                                </a>
                                                            </p>
                                                        </div>
                                                        <div class="content-line clearfix mt5">
                                                            <span class="fl" style=" text-decoration: line-through;">
                                                                <span class="color-d number number-16">
                                                                    <span class="yuan">￥</span>
                                                                    <span class="integer" style="font-size:14px;font-weight:normal;">@item.ZkFinalPrice</span>
                                                                </span>
                                                            </span>
                                                            <span class="fr">
                                                                <span class="color-l">月销：</span><span class="color-d">
                                                                    <span>@item.Volume</span>
                                                                </span>
                                                            </span>
                                                        </div>
                                                        <div class="content-line clearfix">
                                                            <span class="fl color-brand">
                                                                <span class="number number-16">
                                                                    <span class="integer">¥@item.ResultPrice</span>
                                                                </span>
                                                            </span>

                                                        </div>
                                                    </div>
                                                    <div class="box-shop-info dxjh-guide-show">
                                                        <div class="shop-title">
                                                            <span class="shop-hd" style="width:200px;">
                                                                <span class="pubfont icon-dianpu shop-icon"></span>
                                                                <a href="javascript:void(0)" target="_blank">
                                                                    <span>@item.ShopTitle</span>
                                                                </a>
                                                            </span>
                                                            <div class="shop-bd">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="box-btn-group">
                                                        @{
                                                if (item.TbkCouponPrice == 0)
                                                {
                                                    <a href="@item.ItemUrl" class="box-btn-right" target="_blank">
                                                        直接购买
                                                    </a>
                                                }
                                                else
                                                {
                                                    <a href="@item.CouponClickUrl" class="box-btn-right" target="_blank">
                                                        领取优惠券
                                                    </a>
                                                            <a href="javascript:void(0);" class="box-btn-right">
                                                                @item.CouponInfo
                                                            </a>
                                                }
                                                        }
                                                    </div>
                                                </div>
                                            }
                                        }
                                    }
                                </div>
                                <div class="loadingDiv" id="loadingDiv">
                                    <img src="~/Content/images/loading.gif" style="width:50px;" />
                                    <p>
                                        数据加载中，请稍等....
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var hasMore = parseInt("@Model.Goods.Results.Count") >= 20;
    var loading = false;
    var pageIndex = 1;
    $(document).ready(function () {
        $(window).scroll(function () {
            if (hasMore) {
                if ($(document).scrollTop() >= $(document).height() - $(window).height() - 500) {
                    if (!loading) {
                        pageIndex++;
                        loading = true;
                        showLoading();
                        console.log(pageIndex)
                        $.ajax({
                            url: "@Url.Action("LoadMoreData")",
                            data: {
                                categoryId: "@(Model.CurrentCategory == null ? 0 : Model.CurrentCategory.Id)",
                                keyword:"@Request.QueryString["keyword"]",
                                pageIndex: pageIndex
                            },
                            dataType: "json",
                            success: function (data) {
                                var html = '';
                                for (var i = 0; i < data.Results.length; i++) {
                                    var item = data.Results[i];
                                    html += '<div class="block-search-box tag-wrap">';
                                    html += '<div class="pic-box">';
                                    html += '<a class="search-box-img img-loaded" href="' + item.ItemUrl + '" target="_blank"><span class="empty-icon-bg"></span><img src="' + item.PictUrl + '"></a>';
                                    html += '</div>';
                                    html += '<div class="box-content">';
                                    html += '<div class="content-line">';
                                    html += '<p class=" p-title">';
                                    html += '<a class="color-m" href="' + item.ItemUrl + '" target="_blank" title="' + item.Title + '" data-rate="' + item.CommissionRate + '">';
                                    html += '<span>' + item.Title + '</span>';
                                    html += '</a>';
                                    html += '</p>';
                                    html += '</div>';
                                    html += '<div class="content-line clearfix mt5">';
                                    html += '<span class="fl" style=" text-decoration: line-through;">';
                                    html += '<span class="color-d number number-16">';
                                    html += '<span class="yuan">￥</span>';
                                    html += '<span class="integer" style="font-size:14px;font-weight:normal;">' + item.ZkFinalPrice + '</span>';
                                    html += '</span>';
                                    html += '</span>';
                                    html += '<span class="fr">';
                                    html += '<span class="color-l">月销：</span><span class="color-d">';
                                    html += '<span>' + item.Volume + '</span>';
                                    html += '</span>';
                                    html += '</span>';
                                    html += '</div>';
                                    html += '<div class="content-line clearfix">';
                                    html += '<span class="fl color-brand">';
                                    html += '<span class="number number-16">';
                                    html += '<span class="integer">¥' + item.ResultPrice + '</span>';
                                    html += '</span>';
                                    html += '</span>';
                                    html += '</div>';
                                    html += '</div>';
                                    html += '<div class="box-shop-info dxjh-guide-show">';
                                    html += '<div class="shop-title">';
                                    html += '<span class="shop-hd" style="width:200px;">';
                                    html += '<span class="pubfont icon-dianpu shop-icon"></span>';
                                    html += '<a href="javascript:void(0)" target="_blank">';
                                    html += '<span>' + item.ShopTitle + '</span>';
                                    html += '</a>';
                                    html += '</span>';
                                    html += '<div class="shop-bd">';
                                    html += '</div>';
                                    html += '</div>';
                                    html += '</div>';
                                    html += '<div class="box-btn-group">';
                                    if (item.TbkCouponPrice == 0) {
                                        html += '<a href="' + item.ItemUrl + '" class="box-btn-right" target="_blank">';
                                        html += '直接购买';
                                        html += '</a>';
                                    }
                                    else {
                                        html += '<a href="' + item.CouponClickUrl + '" class="box-btn-right" target="_blank">';
                                        html += '领取优惠券';
                                        html += '</a>';
                                        html += '<a href="javascript:void(0);" class="box-btn-right">';
                                        html += item.CouponInfo;
                                        html += '</a>';
                                    }
                                    html += '</div>';
                                    html += '</div>';
                                }
                                $('#resultList').append(html);
                                hideLoading();
                                loading = false;
                                hasMore = data.Results.length >= 20;
                            }, error: function () {
                                hideLoading();
                                hasMore = false;
                            }
                        })
                    }
                }
            }
        });
    })
    showLoading = function () {
        $('#loadingDiv').show();
    }
    hideLoading = function () {
        $('#loadingDiv').hide();
    }
</script>